<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简书 - 创作你的创作</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/index.css">
    <meta name="keywords" content="简书,简书官网,图文编辑软件,简书下载,图文创作,创作软件,原创社区,小说,散文,写作,阅读">
    <meta name="description" content="简书是一个优质的创作社区，在这里，你可以任性地创作，一篇短文、一张照片、一首诗、一幅画……我们相信，每个人都是生活中的艺术家，有着无穷的创造力。">
</head>
<body>
<!--头部导航-->
<nav id="nav">
    <div class="nav-content">
        <!--左边-->
        <div class="nav-content-l">
            <a href="#">
                <img src="images/js_logo.png" alt="">
            </a>
        </div>
        <!--中间内容-->
        <div class="nav-content-c">
            <ul>
                <li><a href=""><img src="images/find_icon.png" alt="">发现</a></li>
                <li><a href=""><img src="images/book_icon.png" alt="">关注</a></li>
                <li><a href=""><img src="images/ld_icon.png" alt="">消息</a></li>
                <li class="search-input">
                    <input type="text" value="搜索">
                    <img src="images/fd_icon.png" alt="" class="search-icon">
                </li>
            </ul>
        </div>
        <!--右边-->
        <div class="nav-content-r">
            <img src="images/jsa_icon.png" alt="" class="jsa-btn">
            <img src="images/touxiang_img.png" alt="" class="head-btn">
            <a href="#" class="write-btn">
                <img src="images/write_icon.png" alt="">
                写文章
            </a>
        </div>
    </div>
</nav>
<!--主体内容-->
<section id="main">
    <!--主体的左边-->
    <div class="main-left">
        <!--焦点图-->
        <div class="main-left-top">
            <img src="images/jdt.png" alt="">
        </div>
        <!--投稿-->
        <div class="main-left-center">
            <a href="#"><img src="images/1.jpg" alt="">故事</a>
            <a href="#"><img src="images/2.jpg" alt="">读书</a>
            <a href="#"><img src="images/3.jpg" alt="">摄影</a>
            <a href="#"><img src="images/4.jpg" alt="">互联网</a>
            <a href="#"><img src="images/2.jpg" alt="">读书</a>
            <a href="#"><img src="images/3.jpg" alt="">摄影</a>
            <a href="#"><img src="images/4.jpg" alt="">互联网</a>
            <a href="#"><img src="images/3.jpg" alt="">摄影</a>
            <a href="#">更多热门专题&nbsp;&gt;</a>
        </div>
        <!--文章列表-->
        <div class="main-left-cell">
            <div class="cell">
                <dl>
                    <dt>
                        <img src="images/cell_img.jpg" alt="">
                    </dt>
                    <dd>
                        <h3>排序图解：js排序算法实现</h3>
                        <p>@(汇总)[js] 基础 Javascript是一种弱类型语言， 它分别有什么优点和缺点 弱类型语言：简单好用，更灵活多变。 但是会牺牲性能，比如一...</p>
                        <a href="#">
                            <span>远方不会远</span>
                        </a>
                        <a href="#">
                            <img src="images/comment_icon.png" alt="">
                            <span>999</span>
                        </a>
                        <a href="#">
                            <img src="images/like_icon.png" alt="">
                            <span>8989</span>
                        </a>
                    </dd>
                </dl>
            </div>
            <div class="cell">
                <dl>
                    <dt>
                        <img src="images/cell_img.jpg" alt="">
                    </dt>
                    <dd>
                        <h3>排序图解：js排序算法实现</h3>
                        <p>@(汇总)[js] 基础 Javascript是一种弱类型语言， 它分别有什么优点和缺点 弱类型语言：简单好用，更灵活多变。 但是会牺牲性能，比如一...</p>
                        <a href="#">
                            <span>远方不会远</span>
                        </a>
                        <a href="#">
                            <img src="images/comment_icon.png" alt="">
                            <span>999</span>
                        </a>
                        <a href="#">
                            <img src="images/like_icon.png" alt="">
                            <span>8989</span>
                        </a>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
    <!--主体的右边-->
    <div class="main-right">
        <!--第一部分-->
        <div class="main-right-top">
            <a href="#"><img src="images/jf01.png" alt=""></a>
            <a href="#"><img src="images/jf02.png" alt=""></a>
            <a href="#"><img src="images/jf03.png" alt=""></a>
            <a href="#"><img src="images/jf04.png" alt=""></a>
            <a href="#"><img src="images/jf05.png" alt=""></a>
        </div>
        <!--第二部分-->
        <div class="main-right-center">
            <dl>
                <dt>
                    <img src="images/itlike.png" alt="">
                </dt>
                <dd>
                    <p>下载简书手机App></p>
                    <p>随时随地发现和创作内容</p>
                </dd>
            </dl>
        </div>
        <!--第三部分-->
        <div class="main-right-bottom">
            <div class="main-right-bottom-head">
                <span>推荐作者</span>
                <span><a href="#">换一批</a></span>
            </div>
            <ul>
                <li>
                    <a class="author-icon" href="#"><img src="images/author1.webp" alt=""></a>
                    <div>
                        <a href="#" class="title">王老师八卦美术史</a>
                        <p>写了132.4k字 · 788喜欢</p>
                    </div>
                    <a href="#" class="focus">+关注</a>
                </li>
                <li>
                    <a class="author-icon" href="#"><img src="images/author1.webp" alt=""></a>
                    <div>
                        <a href="#" class="title">王老师八卦美术史</a>
                        <p>写了132.4k字 · 788喜欢</p>
                    </div>
                    <a href="#" class="focus">+关注</a>
                </li>
                <li>
                    <a class="author-icon" href="#"><img src="images/author1.webp" alt=""></a>
                    <div>
                        <a href="#" class="title">王老师八卦美术史</a>
                        <p>写了132.4k字 · 788喜欢</p>
                    </div>
                    <a href="#" class="focus">+关注</a>
                </li>
                <li>
                    <a class="author-icon" href="#"><img src="images/author1.webp" alt=""></a>
                    <div>
                        <a href="#" class="title">王老师八卦美术史</a>
                        <p>写了132.4k字 · 788喜欢</p>
                    </div>
                    <a href="#" class="focus">+关注</a>
                </li>
                <li>
                    <a class="author-icon" href="#"><img src="images/author1.webp" alt=""></a>
                    <div>
                        <a href="#" class="title">王老师八卦美术史</a>
                        <p>写了132.4k字 · 788喜欢</p>
                    </div>
                    <a href="#" class="focus">+关注</a>
                </li>
            </ul>
            <a href="#" class="main-right-bottom-footer">
                查看全部
            </a>
        </div>
    </div>
</section>
</body>
</html>